<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>热词</title>
	<script src="../components/echarts-4.0.4.min.js"></script>
    <style>
        body,html{
            padding: 0;
            margin: 0;
			background:#0A0F23;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
	<div style="width: 100%;height: 100%;" id="turnover"></div>
</body>
<script>
	var turnover = echarts.init(document.getElementById('turnover'));
        var barOption = {
			title : {
				text: '2017年西安上市企业分类',
				left: 'center',
				top:"5%",
				textStyle: {
					color: '#fff',
					fontSize: 22
				}
			},
			legend: {
			    show: true,
				data:['零售','非银行金融', '景区和旅行社','餐饮','通用设备'],
				left: 'center',
				bottom:"3%",
				textStyle: {
					color: '#fff',
					fontSize:16
				}
			},
			 grid: {
				left: '10%',
				right: '10%',
				bottom: '10%',
				top:'15%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					data : ['主板','新三板','创业板'],
					axisLine: {
						lineStyle: {
							color: '#fff'
						}
					},
					axisTick: {
						lineStyle: {
							color: '#fff'
						}
					},
					axisLabel: {
						interval: 0,
						textStyle: {
							color: '#fff'
						}
					},
					splitLine: {
						show: false
					}
				}
			],
			yAxis : [
				{
					type : 'value',
					axisLine: {
						lineStyle: {
							color: '#fff'
						}
					},
					axisTick: {
						lineStyle: {
							color: '#fff'
						}
					},
					axisLabel: {
						interval: 0,
						textStyle: {
							color: '#fff'
						}
					},
					splitLine: {
						show: true
					}
				}
			],
            color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b'],
			series : [
				{
					name:'零售',
					type:'bar',
					barGap:0,
					data:[13, 3, 2],
					label: {
						normal: {
							show: true,
							position: 'top',
							color:"#fff"
						}
					}
				},
                {
                    name:'通用设备',
                    type:'bar',
                    barGap:0,
                    data:[6, 2, 5],
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color:"#fff"
                        }
                    }
                },
                {
                    name:'非银行金融',
                    type:'bar',
                    barGap:0,
                    data:[2, 4, 10],
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color:"#fff"
                        }
                    }
                },
                {
                    name:'景区和旅行社',
                    type:'bar',
                    barGap:0,
                    data:[14, 7, 4],
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color:"#fff"
                        }
                    }
                },
                {
                    name:'餐饮',
                    type:'bar',
                    barGap:0,
                    data:[7, 10, 2],
                    label: {
                        normal: {
                            show: true,
                            position: 'top',
                            color:"#fff"
                        }
                    }
                }
			]
		};

        turnover.setOption(barOption);
</script>
</html>